26. Exercise: Add Colors, Fonts, and Dimensions
Colors
The final color scheme should be as follows:
| Color | Value |
|---|---|
| colorPrimary | #03A9F4 |
| colorPrimaryDark | #0288D1 |
| colorAccent | #FFD740 |
| colorPrimaryLight | #B3E5FC |
| white | #FFFFFF |
Additionally, you should add colors for text and other details as follows:
| Color | Value |
|---|---|
| primary_text | #212121 |
| secondary_text | #727272 |
| detail_accent_pane_background | #455A64 |
| detail_accent_label | #90A4AE |
| activated | #E0E0E0 |
Dimensions
Create a dimens.xml file with the following dimensions defined:
| Dimension Name | Value |
|---|---|
| forecast_detail_horizontal_padding | 32dp |
| forecast_detail_vertical_padding | 16dp |
| today_icon | 96dp |
| list_icon | 40dp |
| forecast_text_size | 28dp |
| forecast_temperature_space | 4dp |
| today_forecast_list_item_vertical_padding | 16dp |
| list_item_icon_margin_right | 24dp |
| list_item_icon_margin_end | @dimen/list_item_icon_margin_right |
| list_item_padding_horizontal | 16dp |
| loading_indicator_size | 42dp |
| list_item_high_temperature_margin | 12dp |
| list_item_padding_vertical | 12dp |
| list_item_low_temperature_text_view_size | 48dp |
| list_item_date_left_margin | 16dp |
| list_item_date_start_margin | @dimen/list_item_date_left_margin |
Fonts
Specify the fonts used in each TextView; use the sans-serif font family for label TextViews, and use the sans-serif-light font family for the temperature TextViews.
Add Colors, Fonts, and Dimensions
SOLUTION:
- Add each of the primary and accent colors required by Sunshine
- Add dimens.xml, create and use dimensions for Sunshine's layouts
- For the extra weather details, color the background and add label text color
- Add appropriate colors and padding to the forecast list item layout
- Add appropriate colors and padding to the today list item layout
- For the weather info, color the description, high temperature, and low temperature appropriately